<!-- 圈子详情页 -->
<!-- 小吉子 更新于2020.08.22 -->

<!-- 小吉子 修改于2020.08.23 -->
<!-- 修改页面滚动监听 修改顶栏位置 修改创建公告、帖子按钮的样式 -->

<!-- 小吉子 修改于2020.08.24 -->
<!-- 修复页面滚动监听顶栏不变色的bug -->
<!-- 调整公告区样式 修改帖子编辑页的跳转 -->
<!-- 调整悬浮球样式，采用组件并对其源码微调以达到效果 -->

<!-- 小吉子 修改于2020.08.25 -->
<!-- 修改：1.根据用户 role 状态动态调整关注按钮
					 2.根据用户 role 状态动态调整悬浮球内容以及是否显示悬浮球 -->
					 
<!-- 小吉子 修改于2020.08.27 -->
<!-- 圈子详情接口 微调样式 -->

<!-- 小吉子 修改于2020.08.29 -->
<!-- 新增跳转传参 -->

<!-- 小吉子 修改于2020.08.31 -->
<!-- 更新：1.完成圈子帖子接口
					2.优化圈主查询 -->
<!-- 新增：图片缩放尺寸 -->
<!-- 修改：普通帖子摘要组件传值 -->

<!-- 小吉子 修改于2020.09.01 -->
<!-- 修改：1.成员头像点击跳转逻辑
					2.普通帖子摘要传参
					3.改变页面跳转方式：不保存当前页面 -->

<!-- 小吉子 修改于2020.09.01 -->
<!-- 修改：公告列表页传参 -->

<!-- 小吉子 修改于2020.09.06 -->
<!-- 修改：1.圈子公告数据
					2.圈子公告传值 -->

<!-- 小吉子 修改于2020.09.08 -->
<!-- 修改：1.圈子关注按钮无法改变的 bug 
					2.页面跳转 -->

<!-- 小吉子 小瓜子 修改于2020.09.10 -->
<!-- 修改：1.返回页面重新加载 
		  2.页面请求失败时，重新请求数据-->
		  
<!-- 小瓜子 修改于2020.09.11 -->
<!-- 新增：1. 页面数据请求失败时，显示errorpage组件-->

<!-- 小吉子 修改于2020.09.17 -->
<!-- 修改：圈子背景位置 -->

<!-- 小吉子 修改于2020.09.20 -->
<!-- 修改：1.微调样式
					2.优化无内容页面
					3.成员列表显示 -->
<template>
	<view>
		<view class="loading" v-if="isLoading" :style="'height:' + loadingHeight + 'px;width: 100%;'">
			<text :style="'display: block; width: 100%; height: 100%; line-height: ' + loadingHeight + 'px; text-align: center; color:#999'">加载中...</text>
		</view>
		<ErrorPage v-if='err' @reloadPage='reloadPage'></ErrorPage>
		<!-- 圈子详情页 -->
		<!-- 用来将页面整体向下顶，给屏幕状态栏留出空间 -->
		<view class="each_community" v-if="!err && !isLoading">
			<view class="top" :style="'background-image:url('+community.bgImgUrl+')'">
				<view class="status_bar"></view>
				<!-- 自定义导航栏 -->
				<view class="nav_bar" :class="{notTop: isNotTop}">
					<view class="aside return" @tap="back">
						<text class="inxupt inxupttubiao20"></text>
					</view>
					<view class="message">
						<text>{{community.name}}</text>
					</view>
					<view class="aside"></view>
				</view>
				<!-- 圈子信息 -->
				<view class="community_detail">
					<view class="community_message">
						<image :src="community.avatarUrl" mode="aspectFill" class="photo"></image>
						<view class="message">
							<view class="">
								<text>成员 ：{{community.memberNum}}</text>
								<text>话题 ：{{community.topicNum}}</text>
							</view>
							<view class="community_introduce">
								<text>{{community.description}}</text>
							</view>
						</view>
					</view>
					<!-- 关注 -->
					<view class="attention_box">
						<text class="attention" @tap="changeRole" :class="{isRole: isRole!=1}" v-show="userId">{{text}}</text>
					</view>
				</view>
			</view>
			
			<!-- 成员列表 -->
			<view class="member_box">
				<view class="memberList">
					<navigator  hover-class="none" v-for="(member, index) in community.memberList" :key="index" :url="(userId != member.id) ? ('../OthersInformation/OthersInformation?userId='+member.id) : ('../Mine/Mine')" v-if="index < 5">
						<view class="member">
							<image :src="member.avatarUrl" mode="aspectFill" class="photo"></image>
							<text :class="{power: ispower(index)}" class="nikeName">{{member.nickName}}</text>	
						</view>
					</navigator>	
				</view>
				<navigator  hover-class="none" :url="'../CommunityMenbers/CommunityMenbers?communityId='+communityId">
					<view class="member">
						<text class="photo more_arrow">
							<text class="inxupt inxupttubiao20 arrow"></text><text class="inxupt inxupttubiao20 arrow"></text>
						</text>
						<text class="nikeName more">查看全部</text>
					</view>
				</navigator>
			</view>
			<!-- 公告列表 -->
			<view class="notice_box" v-if="community.announcements.length">
				<view class="notice">
					<view class="item" v-for="(announcement, index) in community.announcements" :key="index">
						<text class="text" v-if="announcement.top">置顶公告 ：</text><text class="text" v-else>最新公告 ：</text><Notice :datas="announcement"></Notice>
					</view>
				</view>
				<navigator  hover-class="none" :url="'../NoticeList/NoticeList?communityId='+communityId+'&role='+isRole" v-if="community.announcements.length > 1">
					<view class="notice_more">
						<text class="photo more_arrow">
							<text class="inxupt inxupttubiao20 arrow"></text><text class="inxupt inxupttubiao20 arrow"></text>
						</text>
						<text class="nikeName more">查看全部</text>
					</view>
				</navigator>
			</view>
			<view class="notice_box noNotice" v-else>暂无公告</view>
			<!-- 帖子列表 -->
			<view v-if="community.topicNum">
				<view v-for="(item,index) in topic" :key="index">
					<!-- 学术贴摘要 -->
					<AcademicSummary v-if="item.type==2" :datas="item"></AcademicSummary> 
					<!-- 普通帖摘要 -->
					<PostingsSummary v-if="item.type==1" :datas="item"></PostingsSummary>
				</view>
				<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
			</view>
			<view v-else class="noTopic">暂无帖子</view>
			
			<!-- 创建帖子文章或公告 -->
			<uni-fab horizontal="right"
							 direction="vertical"
							 :content="content[isRole]"
							 :pattern="pattern"
							 @trigger="trigger"
							 v-if="isRole!=1 && userId"></uni-fab>
		</view>
	</view>

</template>

<script>
	import ErrorPage from "../../components/ErrorPage.vue"
	import AcademicSummary from '../../components/summary/AcademicSummary.vue'
	import PostingsSummary from '../../components/summary/PostingsSummary.vue'
	import uniFab from '../../components/plugins/uni-fab/uni-fab.vue'
	import UniLoadMore from "../../components/plugins/uni-load-more.vue"
	import {_ajax} from '../../in-xupt-functions.js'
	export default {
		// 获取传值，更改页面 title 以及获取圈子信息
		onLoad(option) {
			if(option.communityId) {
				this.communityId = option.communityId
			}
			if(option.create) {
				this.create = true
			}
			this.userId = uni.getStorageSync('userId')
			this.loadingHeight = uni.getSystemInfoSync().screenHeight
			this.screenWidth = uni.getSystemInfoSync().screenHeight
			this.initData()
		},
		onShow() {
			if(uni.isRefresh) {
				this.resetData()
				this.initData()
				this.loadingHeight = uni.getSystemInfoSync().screenHeight
				this.screenWidth = uni.getSystemInfoSync().screenHeight
			}
		},
		components: {
			AcademicSummary,
			PostingsSummary,
			uniFab,
			UniLoadMore,
			ErrorPage
		},
		data() {
			return {
				isLoading: true,
				loadingHeight: 0,
				err: false,
				communityId: 0,
				option: {},
				community: {},
				text: '关注',
				topic: [],
				isRole: 1,
				isNotTop: false,
				userId: undefined, // 用户信息
				login: false,
				token: '',
				communityPower: {},
				screenWidth: 0, 
				isPowerOrAdmin: false, // 是否圈主或管理，默认不是
				content: ['首个元素作为占位，无实际意义',
									[{text: '帖子'}, {text: '文章'}],
									[{text: '帖子'}, {text: '文章'}],
									[{text: '公告'}, {text: '帖子'}, {text: '文章'}],
									[{text: '公告'}, {text: '帖子'}, {text: '文章'}]] , // 悬浮球弹窗
				pattern: { // 悬浮球配置
					buttonColor: '#FF6183'
				},
				create: false,
				// 以下为加载圈子帖子列表所需变量
				status: "more",
				contentText: {
					contentdown: "上拉翻找更多东西~", // loading前的文字显示
					contentrefresh: "正在翻找~~", // loading中的显示
					contentnomore: "没有东西啦！" // 没有更多的显示
				},
				nowPage: 1,
				pageSize: 20,
				isLastPage: false,
			}
		},
		methods: {
			resetData: function () {
				this.option = {}
				this.community = {}
				this.text = '关注'
				this.topic = []
				this.isRole = 1
				this.isNotTop = false
				this.communityPower = {}
				this.isPowerOrAdmin = false
				this.status = "more"
				this.nowPage = 1
				this.pageSize = 20
				this.isLastPage = false
				this.isLoading = false
			},
			reloadPage: function () {
				this.err = false;
				this.isLoading = true;
				this.initData()
			},
			initData() {
				this.isLoading = true
				// uni.showLoading({
				// 	mask: false,
				// 	title: '正在加载中...'
				// })
				var _self = this;
				_ajax({
					url: '/circle/'+_self.communityId,
					method: 'get'
				}).then((res) => {
					console.log(res)
					if(res.data.status == 0) {
						// _self.isLoading = false
						_self.community = res.data.data
						_self.isRole = _self.community.role
						// 循环将圈主放在第一个元素位置
						// 注：foreach 循环不支持在遍历结束前终止，所以使用抛出异常的方法解决
						try{
							_self.community.memberList.forEach((item, index) => {
								if(item.role==4) {
									_self.community.memberList.unshift(..._self.community.memberList.splice(index, 1))
									throw new Error("find power")
								}
							})	
						}catch(e){
							//TODO handle the exception
							console.log(e.message)
						}
						let power = {}
						power.nickName = _self.community.memberList[0].nickName
						power.id = _self.community.memberList[0].id
						_self.communityPower = power
						_self.isPowerOrAdmin = _self.ispower(power.id - _self.userId)
					} else {
						uni.showToast({
							icon:'none',
							title:res.data.msg
						})
					}
					
					
					// 获取帖子文章
					return _ajax({ 
						url: '/circle/'+_self.communityId+'/posts'+'?pageNum='+_self.nowPage+'&pageSize='+_self.pageSize,
						method: 'get'
					})
				})
				.then(res => {
					if (res.data.status == 0) {
						_self.isLastPage = res.data.data.isLastPage
						_self.allpage = res.data.data.navigatepageNums.length
						_self.topic.push(...res.data.data.list)
						uni.hideLoading();
						_self.isLoading = false
					}else {
						uni.showToast({
							icon:'none',
							title:res.data.msg
						})
					}
					
				})
				.catch(err => {
					// 请求失败情况下
					_self.isLoading = false
					console.log(_self.isLoading)
					uni.hideLoading()
					_self.err = true
				})
			},
			// 返回上级页面
			back() {
				// 如果上级页面是创建页则返回圈子页
				if(this.create) {
					uni.navigateBack({
						delta: 2
					})
				}
				uni.navigateBack()
			},
			// 改变关注状态
			changeRole() {
				let _self = this
				if(this.isRole == 1) {
					_ajax({
						url: '/circle/'+_self.communityId+'/follow',
						method: 'post'
					}).then((res) => {
						if(res.data.status == 0) {
							_self.isRole = 2
						}
					})
				} else if (this.isRole == 2) {
					// this.isRole = 1
					_ajax({
						url: '/circle/'+_self.communityId+'/follow',
						method: 'delete'
					}).then((res) => {
						if(res.data.status == 0) {
							_self.isRole = 1
						}
					})
				} else {
					_ajax({
						url: '/circle/'+_self.communityId+'/follow',
						method: 'delete'
					}).then((res) => {
						plus.nativeUI.toast(res.data.msg+'哦~', {verticalAlign: 'center'})
					})
				}
			},
			// 是否圈主或管理
			ispower(index) {
				if(index === 0) {
					return true
				}
				return false
			},
			// 悬浮球item点击
			trigger(item) {
				let _self = this
				if(_self.isRole == 2) {
					if(item.index === 0) {
						// 跳转帖子编辑页
						uni.navigateTo({
							url: '../PostingsEdit/PostingsEdit?communityId='+_self.communityId
						})
					} else {
						// 跳转文章编辑页
						uni.navigateTo({
							url: '../AcademicEdit/AcademicEdit?communityId='+_self.communityId
						})
					}	
				} else if(_self.isRole == 3 || _self.isRole == 4) { // 当权限为圈主或者管理员可以设置公告
					if(item.index === 0) {
						// 跳转创建公告页 
						uni.navigateTo({
							url: '../NoticeEdit/NoticeEdit?communityId='+_self.communityId
						})
					} else if(item.index === 1){
						// 跳转帖子编辑页
						uni.navigateTo({
							url: '../PostingsEdit/PostingsEdit?communityId='+_self.communityId
						})
					}	else {
						// 跳转文章编辑页
						// TODO 传圈子id
						uni.navigateTo({
							url: '../AcademicEdit/AcademicEdit?communityId='+_self.communityId
						})
					}
				}
			},
			
			// 上拉加载
			loadMore() {
				this.status = "loading";
				if(this.isLastPage) {
					this.status = "noMore"
				} else {
					let _self = this
					_self.nowPage += 1
					_ajax({
						url: '/circle/'+_self.communityId+'/posts'+'?pageNum='+_self.nowPage+'&pageSize='+_self.pageSize,
						method: 'get'
					}).then(res => {
						console.log(_self.topic)
						_self.isLastPage = res.data.data.isLastPage
						_self.allpage = res.data.data.navigatepageNums.length
						_self.topic.push(...res.data.data.list)
						_self.status = 'more'
						if(_self.topic.length == 0) {
							_self.status = 'noMore'
						}
					})
				}
			},
		},
		watch: {
			isRole: function() {
				if(this.isRole != 1) {
					this.text = '已关注'
				} else {
					this.text = '关注'
				}
			}
		},
		
		// 屏幕滚动改变顶栏
		onPageScroll(page) {
			let height = 100 / 750 * parseInt(this.screenWidth)
			if(page.scrollTop >= height) {
				this.isNotTop = true
			} else {
				this.isNotTop = false
			}
		}
	}
</script>

<style lang="less">
.each_community {
	// --status-bar-height为设备状态栏高度
	@statusHeight: var(--status-bar-height);
	background-color: @g-background;

	.top {
		background-repeat: no-repeat;
		background-size: cover;
		// background-position: center -100rpx; 
		background-position: center;
		background-clip: border-box;
		// position: fixed;
		margin-top: @statusHeight;
		.status_bar {
			height: @statusHeight;
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			top: 0rpx;
			z-index: 2;
		}
		// 自定义顶栏
		.nav_bar {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			color: #000000;
			font-size: 14px;
			z-index: 100;
			background-color: rgba(255, 255, 255, .6);
			.aside {
				width: 120rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				text {
					display: inline-block;
					width: 90%;
					height: 95%;
					font-size: 1.2rem;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				// flex: 1;
			}
			.return {
				transform: rotate(180deg);
			}
			.message {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
			}
		}
		.notTop {
			background-color: @g-background!important;
		}
		// 圈子信息
		.community_detail {
			display: flex;
			width: 750rpx;
			height: 220rpx;
			position: relative;
			// margin-top: 100rpx;
			overflow: visible;
			background-color: rgba(255, 255, 255, .6);
			.community_message, .attention_box {
				display: flex;
				justify-content: space-around;
			}
			.community_message {
				width: 550rpx;
				flex: 1;
				align-items: center;
				
				.photo {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}
				.message {
					width: 370rpx;
					
					view:first-child {
						display: flex;
						justify-content: space-between;
						line-height: 2rem;
					}
				}
			}
			.attention_box {
				width: 200rpx;
				
				.attention {
					display: inline-block;
					width: 130rpx;
					line-height: 2.5rem;
					border-radius: 100rpx;
					background-color: @g-pink;
					color: white;
					margin-top: 45rpx;
					height: 1.5rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.isRole {
					background-color: white;
					color: @g-gray;
				}
			}
		}
	}
	
	// 成员列表
	.member_box {
		margin: 0.5rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 5px;
		box-shadow: 0 0 2px rgba(216, 214, 208, 0.5);
		padding: 10rpx;
		background-color: white;
		
		.memberList {
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}
		.member {
			max-width: 125rpx;
			width: 121rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			
			.photo {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: inline-block;
			}
			.more_arrow {
				// transform: rotate(180deg);
				text-align: center;
				vertical-align: top;
				padding-top: 0.3rem;
				box-sizing: border-box;
				
				.arrow {
					font-size: 1.3rem;
					display: inline-block;
					margin: 0 -0.3rem;
				}
			}
			.nikeName {
				font-size: 14px;
				line-height: 1.2rem;
				max-width: 120rpx;
				overflow:hidden;
				white-space:nowrap;
				text-overflow:ellipsis;
			}
			.more {
				color: @g-gray;
			}
			.power {
				color: @g-blue;
			}
		}
	}
	// 公告栏
	.notice_box {
		// padding: 20rem;
		margin: 0.5rem 0;
		border-radius: 5px;
		box-shadow: 0 0 2px rgba(216, 214, 208, 0.5);
		padding: 10rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.notice {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			
			.item {
				display: flex;
				line-height: 1.2rem;
				height: 1.2rem;
				justify-content: start;
				align-items: center;	
				margin-left: 5px;
				
				.text {
					color: @g-blue;
				}		
			}
		}
		.notice_more {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			
			.photo {
				border-radius: 50%;
				display: inline-block;
			}
			.more_arrow {
				// transform: rotate(180deg);
				text-align: center;
				vertical-align: top;
				padding-top: 0.3rem;
				box-sizing: border-box;
				
				.arrow {
					font-size: 1.3rem;
					display: inline-block;
					margin: 0 -0.3rem;
				}
			}
			.nikeName {
				line-height: 1.2rem;
			}
			.more {
				color: @g-gray;
			}
			.power {
				color: @g-blue;
			}
		}
	}
	// 创建按钮
	.create_box {
		position: fixed;
		bottom: 50rpx;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		min-width: 50px;
		min-height: 50px;
		border-radius: 50%;
		
		.button {
			display: inline-block;
			width: 100%;
			height: 100%;
			font-size: 50px;
			z-index: 100;
		}
		.choice {
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			line-height: 1.4rem;
			top: -3.3rem;
			width: 100%;
			background-color: white;
			border: 1px solid #7f7f7f3d;
			border-radius: 5px;
			box-shadow: 0 0 3px #7f7f7f3d;
			
			.border_bottom {
				border-bottom: 1px solid @g-gray;
			}
			&:after {
				width: 0;
				height: 0;
				position: absolute;
				display: inline-block;
				border: 10px solid white;
				border-left-color: transparent;
				border-right-color: transparent;
				border-bottom-color: transparent;
				bottom: -20px;
				left: calc(50% - 10px);
				content: '';
			}
		}
	}
	.noNotice, .noTopic {
		font-size: 14px;
		color: @g-gray;
	}
	.noTopic {
		text-align: center;
	}
}
</style>
